<template>
  <div class="dialog-box" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading"
       element-loading-text="正在加载...">
    <div class="box-content">
      <div class="content-header">
        <span>逻辑单体化</span>
        <i class="el-icon-close" @click="closeDialog"></i>
      </div>
      <div class="content-body">
        <el-form label-width="100px">
          <div class="form-item-box">
            <el-form-item v-if="tileTree" label="倾斜三维">
              <el-select v-model="tileId" placeholder="">
                <el-option v-for="item in tileTree.children" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="vectorTree" label="矢量图层">
              <el-select v-model="vectorId" placeholder="">
                <el-option v-for="item in vectorTree.children" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="遮罩颜色">
              <el-color-picker v-model="color" color-format="hex" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="遮罩透明度">
              <el-input-number v-model="opacity" :controls="true" :max="1" :min="0.1" :step="0.1"
                               controls-position="right"
                               size="small">
              </el-input-number>
            </el-form-item>
            <el-form-item class="submit-btn">
              <el-button class="grey-hover-grey-button" @click="closeDialog">取消</el-button>
              <el-button type="primary" @click="clickConfirmBtn">确定</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  data() {
    return {
      tileId: '',
      vectorId: '',
      color: '#0000ff',
      opacity: 0.5
    };
  },
  computed: mapState({
    tileTree: state => state.treeData[0].children[0],
    vectorTree: state => state.treeData[0].children[1]
  }),
  methods: {
    closeDialog() {
      this.$emit('close')
    },
    clickConfirmBtn() {
      if (!this.tileId || !this.vectorId) {
        this.$message.error('请选择倾斜三维和矢量图层')
        return
      }
      const {color, opacity} = this
      let tileInfo = null
      let vectorInfo = null
      this.tileTree.children.forEach(item => {
        if (item.id === this.tileId) {
          tileInfo = item
        }
      })
      this.vectorTree.children.forEach(item => {
        if (item.id === this.vectorId) {
          vectorInfo = item
        }
      })
      let params = {
        tileInfo,
        vectorInfo,
        color,
        opacity
      }
      this.$emit('confirm', params)
    }
  },
  created() {
  },
  mounted() {
  }
};
</script>
<style lang="less" scoped></style>